<template>
  <div>
    <div class="main">
      <div class="box">
        <div class="box_title">
          <div style="display: flex">
            <div class="margin" :class="{ active: teb_active == 1 }" @click="teb_active = 1" >督办管理</div>
            <div class="margin" :class="{ active: teb_active == 2 }" @click="teb_active = 2" >一屏四城五区</div>
            <div class="margin" :class="{ active: teb_active == 3 }" @click="teb_active = 3" >产业发展六大行动</div>
            <div class="margin" :class="{ active: teb_active == 4 }" @click="teb_active = 4" >三进三问三查</div>
          </div>
        </div>
        <div class="box_body">
          <div style="display:flex">
            <div style="width:25%;">
              <div ref="echart_box1" class="card"></div>
              <p class="text" style="color: #409EFF;">已完成</p>
            </div>
            <div style="width:25%;">
              <div ref="echart_box2" class="card"></div>
              <p class="text" style="color: #81c158;">推进中</p>
            </div>
            <div style="width:25%;">
              <div ref="echart_box3" class="card"></div>
              <p class="text" style="color: #ed7330;">待汇报</p>
            </div>
            <div style="width:25%;">
              <div ref="echart_box4" class="card"></div>
              <p class="text" style="color: #ea3a24;">已超期</p>
            </div>
          </div>
          <div class="echartText">共发布事项 <span>{{num1}}</span>件，已完成 <span>{{num2}}</span>件； <span>{{num3}}</span>件推进中； <span>{{num4}}</span>个待汇报， <span>{{num5}}</span>个已经超期</div>
        </div>
      </div>
      <div class="box">
        <div class="box_title">
          <div class="top">项目管理统计</div>
        </div>
        <div class="box_body">
          <div class="xmgltj">
            <div class="xm_box">
              <div class="xm_tit">
                <div>项目数</div>
              </div>
              <div class="xm_body">
                <div class="xm_card">
                  <img src="/img/wel/ma11.png" alt="">
                  <span>&nbsp;{{xmNum1}}</span>
                  <span class="xm_text">个</span>
                </div>
              </div>
            </div>
            <div class="xm_box">
              <div class="xm_tit">
                <div>开复工数</div>
              </div>
              <div class="xm_body">
                <div class="xm_card">
                  <img src="/img/wel/ma10.png" alt="">
                  <span>&nbsp;{{xmNum2}}</span>
                  <span class="xm_text">个</span>
                </div>
              </div>
            </div>
            <div class="xm_box">
              <div class="xm_tit">
                <div>开复工率 <span>{{xmNum3}}</span>%</div>
              </div>
              <div class="xm_body">
                <div style="margin-top:20px">
                  <el-progress :percentage="50" :show-text="false" :stroke-width="8"></el-progress>
                </div>
              </div>
            </div>
            <div class="xm_box">
              <div class="xm_tit">
                <div>总投资</div>
              </div>
              <div class="xm_body">
                <div class="xm_card">
                  <img src="/img/wel/ma9.png" alt="">
                  <span>&nbsp;{{xmNum4}}</span>
                  <span class="xm_text">亿元</span>
                </div>
              </div>
            </div>
            <div class="xm_box">
              <div class="xm_tit">
                <div>当年投资</div>
              </div>
              <div class="xm_body">
                <div class="xm_card">
                  <img src="/img/wel/ma9.png" alt="">
                  <span>&nbsp;{{xmNum5}}</span>
                  <span class="xm_text">亿元</span>
                </div>
              </div>
            </div>
            <div class="xm_box" style="position: relative; top: -20px">
              <div class="xm_tit">
                <div>完成投资</div>
              </div>
              <div class="xm_body">
                <div class="xm_card">
                  <img src="/img/wel/ma11.png" alt="">
                  <span>&nbsp;{{xmNum6}}</span>
                  <span class="xm_text">亿元</span>
                </div>
                <div>
                  <div style="font-size: 12px;margin-bottom: 8px;">投资完成率<span>{{xmNum7}}</span>%</div>
                  <el-progress :percentage="50" :show-text="false" :stroke-width="8"></el-progress>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="box">
        <div class="box_title">
          <div class="top">通知公告</div>
          <div class="more">更多</div>
        </div>
        <div class="box_body">
          <div class="tzgg" v-for="(item,index) in tzList" :key="index">
            <el-tooltip class="item" effect="light" :content="item.title" placement="bottom">
              <div class="tz_text">{{item.title}}</div>
            </el-tooltip>
            <span>{{item.time}}</span>
          </div>
        </div>
      </div>
      <div class="box">
        <div class="box_title">
          <div class="top">督查评价</div>
        </div>
        <div class="box_body">
          <div class="dcpj" style="margin:10px">
            <div>
              <el-select v-model="value1" placeholder="请选择" size="small">
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div style="width:50%">
              <el-select style="width:40%" v-model="value2" placeholder="请选择" size="small">
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-select style="width:55%;margin-left:5%" v-model="value3" placeholder="请选择" size="small">
                <el-option
                  v-for="item in options3"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <el-table
            :data="tableData"
            stripe
            style="width: 100%;padding:0 3%;box-sizing: border-box;"
            :header-cell-style="{background:'#eaedf2'}"
            :row-style="{height:'16px'}"
            :cell-style="{padding: '5px 0'}">
            <el-table-column
              prop="address"
              label="区县"
              min-width="50%">
            </el-table-column>
            <el-table-column
              prop="num"
              label="分数"
              min-width="35%">
            </el-table-column>
            <el-table-column
              prop="rank"
              label="排名"
              min-width="15%">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="box">
        <div class="box_title">
          <div style="display: flex">
            <div class="margin" :class="{ active: top_active == 1 }" @click="top_active = 1">季度评价</div>
            <div class="margin" :class="{ active: top_active == 2 }" @click="top_active = 2">年度评价</div>
          </div>
        </div>
        <div class="box_body">
          <div class="dcpj" style="margin:10px">
            <div>
              <el-select v-model="value1" placeholder="请选择" size="small">
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div style="width:50%">
              <el-select style="width:40%" v-model="value2" placeholder="请选择" size="small">
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-select style="width:55%;margin-left:5%" v-model="value3" placeholder="请选择" size="small">
                <el-option
                  v-for="item in options3"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
      </div>
      <div class="box">
        <div class="box_title">
          <div class="top">工作动态</div>
          <div class="more">更多</div>
        </div>
        <div class="box_body"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
import { LineChart, PieChart } from "echarts/charts";
import { UniversalTransition, LabelLayout } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  LabelLayout,
  PieChart,
  CanvasRenderer,
  UniversalTransition,
]);

export default {
  data() {
    return {
      teb_active: "1",
      top_active: "1",
      num1: '10',
      num2: '7',
      num3: '3',
      num4: '0',
      num5: '0',
      echartBox1: {
        title:{
          text: '0',
          left: 'center',
          top: '60',
        },
        color: ["#409EFF","#d3d3d3"],
        series: [
          {
            type: 'pie',
            top: '20',
            radius: ['60%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            data: [
              { value: 0 },
              { value: 0 },
            ]
          }
        ]      
      },
      echartBox2: {
        title:{
          text: '0',
          left: 'center',
          top: '60',
        },
        color: ["#81c158","#d3d3d3"],
        series: [
          {
            type: 'pie',
            top: '20',
            radius: ['60%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            data: [
              { value: 0 },
              { value: 0 },
            ]
          }
        ]      
      },
      echartBox3: {
        title:{
          text: '0',
          left: 'center',
          top: '60',
        },
        color: ["#ed7330","#d3d3d3"],
        series: [
          {
            type: 'pie',
            top: '20',
            radius: ['60%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            data: [
              { value: 0 },
              { value: 0 },
            ]
          }
        ]      
      },
      echartBox4: {
        title:{
          text: '0',
          left: 'center',
          top: '60',
        },
        color: ["#ea3a24","#d3d3d3"],
        series: [
          {
            type: 'pie',
            top: '20',
            radius: ['60%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            data: [
              { value: 0 },
              { value: 0 },
            ]
          }
        ]      
      },
      xmNum1: '503',
      xmNum2: '503',
      xmNum3: '50.00',
      xmNum4: '1500.20',
      xmNum5: '150.20',
      xmNum6: '50.00',
      xmNum7: '7.52',
      tzList:[
        {title:'卢小亨在市党政履责督考一体化平台建设领导小组会议上强调扎实推进平台建设运行各项工作为高效落实各项决策部署提供有效载体支撑',time:'2022-03-29'},
        {title:'卢小亨在市党政履责督考一体化平台建设领导小组会议上强调扎实推进平台建设运行各项工作为高效落实各项决策部署提供有效载体支撑',time:'2022-03-29'},
        {title:'卢小亨在市党政履责督考一体化平台建设领导小组会议上强调扎实推进平台建设运行各项工作为高效落实各项决策部署提供有效载体支撑',time:'2022-03-29'},
        {title:'卢小亨在市党政履责督考一体化平台建设领导小组会议上强调扎实推进平台建设运行各项工作为高效落实各项决策部署提供有效载体支撑',time:'2022-03-29'},
        {title:'卢小亨在市党政履责督考一体化平台建设领导小组会议上强调扎实推进平台建设运行各项工作为高效落实各项决策部署提供有效载体支撑',time:'2022-03-29'},
      ],
      options1: [{
        value: '1',
        label: '区县'
      }, {
        value: '2',
        label: '市直综合部门'
      }, {
        value: '3',
        label: '市直社会发展部门'
      }, {
        value: '4',
        label: '市直社会发展部门'
      }, {
        value: '5',
        label: '市直社会发展部门'
      }],
      value1: '区县',
      value2: '2022',
      value3: '第一季度',
      options2: [{
        value: '1',
        label: '2022'
      }, {
        value: '2',
        label: '2021'
      }, {
        value: '3',
        label: '2020'
      }],
      options3: [{
        value: '1',
        label: '第一季度'
      }, {
        value: '2',
        label: '第二季度'
      }, {
        value: '3',
        label: '第三季度'
      }, {
        value: '4',
        label: '第四季度'
      }],
      tableData: [
        {
          address: '甘州区',
          num: '0',
          rank: '/'
        }, 
        {
          address: '甘州区',
          num: '0',
          rank: '/'
        }, 
        {
          address: '甘州区',
          num: '0',
          rank: '/'
        }, 
        {
          address: '甘州区',
          num: '0',
          rank: '/'
        }, 
        {
          address: '甘州区',
          num: '0',
          rank: '/'
        }, 
        {
          address: '甘州区',
          num: '0',
          rank: '/'
        }, 
        {
          address: '甘州区',
          num: '0',
          rank: '/'
        }, 
        {
          address: '甘州区',
          num: '0',
          rank: '/'
        }, 
      ]
    };
  },
  created() {},
  mounted(){
    this.drawEcharts()
  },
  methods: {
    drawEcharts() {
      let myChart1 = echarts.init(this.$refs.echart_box1);
      let myChart2 = echarts.init(this.$refs.echart_box2);
      let myChart3 = echarts.init(this.$refs.echart_box3);
      let myChart4 = echarts.init(this.$refs.echart_box4);
      myChart1.setOption(this.echartBox1);
      myChart2.setOption(this.echartBox2);
      myChart3.setOption(this.echartBox3);
      myChart4.setOption(this.echartBox4);
      
    },
  },
};
</script>
<style lang='scss' scoped>
.main {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  .box {
    width: calc(33.3% - 20px);
    background-color: #fff;
    margin: 10px;
    .box_title {
      border-bottom: 1px solid #d9d9d9;
      padding: 0 15px;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .margin {
        margin-right: 15px;
        cursor: pointer;
      }
      .margin.active {
        color: #2a83f1;
        font-size: 18px;
        font-weight: 600;
      }
      .top{
        font-size: 18px;
        font-weight: 600;
      }
      .more{
        font-size: 16px;
        color: #d9d9d9;
        cursor: pointer;
      }
    }
    .box_body {
      height: 250px;
      .card{
        width: 80%;
        padding: 0 10%;
        height: 130px;
      }
      .text{
        display: flex;
        justify-content: center;
      }
      .echartText{
        margin: 15px 0 0 15px;
        span{
          color: #0068b7;
        }
      }
      .xmgltj{
        display: flex;
        flex-wrap: wrap;
        justify-content: start;
        .xm_box{
          width: calc(33.3% - 20px);
          margin: 10px;
          .xm_tit{
            margin: 10px;
          }
          .xm_body{
            margin: 0 0 10px 10px;
            .xm_card{
              font-size: 17px;
              font-weight: 500;
              display: flex;
              flex-direction: row;
              align-items: flex-end;
              height: 50px;
              img{
                width: 28px;
              }
              .xm_text{
                margin: 0 0 5px 5px;
                font-size: 14px;
                color: #373434;
              }
            }
          }
        }
      }
      .tzgg{
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 8px;
        box-sizing: border-box;
        .tz_text{
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          cursor: pointer;
        }
        span{
          flex: 0 1 170px
        }
      }
      .dcpj{
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>